<template>
  <div class="setting divBox">
    <el-card class="box-card" shadow="hover">
      <template v-slot:header>
        <el-row>
          <el-col :span="24">
            <el-tabs class="tabs" v-model="oneLevelActiveName">
              <el-tab-pane label="基础配置" name="stone" lazy>
                <span slot="label">
                  <i class="el-icon-setting"></i> 基础配置
                </span>
                <el-row>
                  <el-col :span="24">
                    <el-tabs v-model="levelActiveSite" type="card">
                      <el-tab-pane label="站点设置" name="site" lazy>
                        <site-config></site-config>
                      </el-tab-pane>
                    </el-tabs>
                  </el-col>
                </el-row>
              </el-tab-pane>
              <el-tab-pane label="商城配置" name="mall" lazy>
                <span slot="label">
                  <i class="el-icon-shopping-cart-2"></i> 商城配置
                </span>
                <el-row>
                  <el-col :span="24">
                    <el-tabs v-model="levelActiveMall" type="card">
                      <el-tab-pane label="商城基础配置" name="basic" lazy>
                        <basics-config></basics-config>
                      </el-tab-pane>
                      <el-tab-pane label="售后退款配置" name="after" lazy>
                        <refund-config></refund-config>
                      </el-tab-pane>
                    </el-tabs>
                  </el-col>
                </el-row>
              </el-tab-pane>
              <el-tab-pane label="应用端配置" name="application" lazy>
                <span slot="label">
                  <svg-icon icon-class="analytics" class-name='custom-class'></svg-icon> 应用端配置
                </span>
                <el-row>
                  <el-col :span="24">
                    <el-tabs v-model="levelActiveApp" type="card">
                      <el-tab-pane label="公众号配置(H5)" name="toH5" lazy>
                        <official></official>
                      </el-tab-pane>
                      <el-tab-pane label="小程序配置" name="toApplet" lazy>
                        <applets></applets>
                      </el-tab-pane>
                    </el-tabs>
                  </el-col>
                </el-row>
              </el-tab-pane>
              <el-tab-pane label="支付配置" name="pay" lazy>
                <span slot="label">
                  <svg-icon icon-class="usd" class-name='custom-class'></svg-icon> 支付配置
                </span>
                <el-row>
                  <el-col :span="24">
                    <el-tabs v-model="levelActivePay" type="card">
                      <el-tab-pane label="微信支付配置" name="toPay" lazy>
                        <wechat-payment></wechat-payment>
                      </el-tab-pane>
                    </el-tabs>
                  </el-col>
                </el-row>
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>
      </template>
    </el-card>
  </div>
</template>

<script>
  import refundConfig from './components/refundConfig';
  import basicsConfig from './components/basicsConfig';
  import siteConfig from './components/siteConfig';
  import official from './official';
  import applets from './applet';
  import wechatPayment from './wechatPayment';

  export default {
    name: 'Setting',
    components: {
      official,
      applets,
      wechatPayment,
      refundConfig,
      basicsConfig,
      siteConfig
    },
    data() {
      return {
        oneLevelActiveName: 'stone',
        // 应用
        levelActiveApp: 'toH5',
        // 支付
        levelActivePay: 'toPay',
        // 商城配置
        levelActiveMall: 'basic',
        // 站点设置
        levelActiveSite: 'site'
      }
    }
  }
</script>

<style lang="scss" scoped>
  .setting {
    ::v-deep .el-card__header {
      border-bottom: 0px solid transparent;
      padding-bottom: 0px;
    }
    .box-card {
      .tabs {
        svg {
          font-size: 14px;
        }
      }
    }
    .settionWidth {
      max-width: 600px;
    }
    .el-form-item--small.el-form-item {
      margin-bottom: 30px;
    }
  }
</style>
